<template>
  <div class="main">
    <div class="btn_con" :gutter="8">
        <el-button @click="handlerCancel">
          返回
        </el-button>
        <el-button @click="handleAdd" type="primary">新增询价</el-button>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" :height="tableHeight" v-loading="loading" element-loading-svg-view-box="0, 0, 1024, 1024" :element-loading-svg="LoadingSvg">
        <el-table-column prop="productName" label="产品名称" />
        <el-table-column prop="printWay" label="印刷方式">
          <template #default="{ row }">
            {{ printWayMap[row.printWay] }}
          </template>
        </el-table-column>
        <el-table-column prop="printLogo" label="LOGO" />
        <el-table-column prop="factoryName" label="工厂">
          <template #default="{ row }">
            <span v-if="row.source === 'sa'">快速询价</span>
            <span v-else>{{ row.factoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button plain type="primary" size="small" @click="handleEdit(scope.row)">{{ scope.row.source === 'sa' ? '查看' : '编辑' }}</el-button>
            <!-- <el-button plain type="primary" size="small" @click="handleCount(scope.row)">报价测算</el-button> -->
            <el-button plain type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_con">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :total="pagination.total"
          small background layout="prev, pager, next"
        />
      </div>
    </div>
    <AddModal ref="addModalRef" :packagingList="packagingList" :factoryList="factoryList" :printWayList="printWayList" :logoLocationList="logoLocationList" @close="handlerClose" />
  </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, defineAsyncComponent } from 'vue';
import api from '/@/api/email/index';
import commonApi from '/@/api/common/index';
import { useRoute, useRouter } from 'vue-router';
import { LoadingSvg } from '/@/utils/loading';

const AddModal = defineAsyncComponent(() => import('./addModal.vue'));

const router = useRouter();
const tableData = ref([]);
const route = useRoute();
const tableHeight = ref(500);

const editId = ref('');
const queryForm = ref<any>({});

const loading = ref(false);
const printWayList = ref([]);
const packagingList = ref([]);
const printWayMap = ref<any>({});
const factoryMap = ref<any>({});
// const printLogoMap = ref<any>({});
// const printLogoList = ref([]);
const logoLocationList = ref([]);
const logoLocationMap = ref<any>({});
const factoryList = ref([]);
const addModalRef = ref()
const pagination = ref({
  page: 1,
  size: 10,
  total: 0
});

const getPackaging = async () => {
  const res = await commonApi.getDictData('packaging');
  if (res.code === 200) {
    packagingList.value = res.data;
  }
};

const getLogoLocation= async () => {
  const res = await commonApi.getDictData('print_logo');
  if (res.code === 200) {
    logoLocationList.value = res.data;
    logoLocationMap.value = logoLocationList.value.reduce((obj: any, item: any) => {
      obj[item.dictValue] = item.dictLabel;
      return obj;
    }, {});
  }
};

const getPrintWay = async () => {
  const res = await commonApi.getDictData('print_way');
  if (res.code === 200) {
    printWayList.value = res.data;
    printWayMap.value = printWayList.value.reduce((obj: any, item: any) => {
      obj[item.dictValue] = item.dictLabel;
      return obj;
    }, {});
  }
};

// const getPrinLogo = async () => {
//   const res = await commonApi.getDictData('print_logo');
//   if (res.code === 200) {
//     printLogoList.value = res.data;
//     printLogoMap.value = printLogoList.value.reduce((obj: any, item) => {
//       obj[item.dictValue] = item.dictLabel;
//       return obj;
//     }, {});
//   }
// };

const getFactoryList = async () => {
  const res = await api.factory.getList({ 
    pageNum: 1,
    pageSize: 999,
  });
  if (res.code === 200) {
    factoryList.value = res.data;
    factoryMap.value = factoryList.value.reduce((obj: any, item) => {
      obj[item.id] = item.name;
      return obj;
    }, {});
  }
};

const getList = async () => {
  // const account = stores.curAccount;
  const inquiryId = route.query.inquiryId;
  loading.value = true;
  const res = await api.offer.getList({
    // emailAccount: account,
    pageNum: pagination.value.page,
    pageSize: pagination.value.size,
    ...queryForm.value,
    inquiryId
  });
  loading.value = false;
  if (res.code === 200) {
    tableData.value = res.data;
    pagination.value.total = res.total;
  }
};

const handleDel = async (row: any) => {
  ElMessageBox.confirm('确认删除吗?', { cancelButtonText: '取消', confirmButtonText: '确认' }).then(async () => {
    const res = await api.offer.del(row.id);
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '操作成功' });
      getList();
    }
  });
};


const handleEdit = async (row: any) => {
  editId.value = row.id;
  addModalRef.value.showDialog = true
  const res = await api.offer.getDetail(row.id);
  if (res.code === 200) {
    if (res.data.sizeType === '长宽高') {
      res.data.productSizeArrs = res.data.productSize.split('*');
    } else {
      res.data.productSizeArrs = res.data.productSize.split(',');
    }
    if (!res.data.source) {
      res.data.source = row.source;
    }
    res.data.materialImgs = res.data.materialImgs ? res.data.materialImgs.split(',').map((m: any) => ({ name: '', url: m })) : []
    res.data.effectImgs = res.data.effectImgs ? res.data.effectImgs.split(',').map((m: any) => ({ name: '', url: m })) : []
    addModalRef.value.form = res.data;
  }
};

const handleAdd = () => {
  addModalRef.value.showDialog = true
  addModalRef.value.form.productName = route.query.productName;
  addModalRef.value.form.inquiryId = route.query.inquiryId;
};

const handlerCancel = () => {
  router.go(-1);
};

const handlerClose = async (refresh?: boolean) => {
  if (refresh) {
    if (editId.value) {
      const res = await api.offer.getDetail(editId.value);
      if (res.code === 200) {
        const item: any = tableData.value.find((item: any) => item.id === editId.value);
        if (item) {
          Object.assign(item, res.data);
        } else {
          getList();
        }
      }
    } else {
      getList();
    }
  }
};

const handleCurrentChange = (page: number) => {
  pagination.value.page = page;
  getList();
};

onMounted(() => {
  getList();
  getPrintWay();
  // getPrinLogo();
  getFactoryList();
  getLogoLocation();
  // getTempList();
  getPackaging();

  const setTableHeight = () => {
    tableHeight.value = window.innerHeight - 120 // 80 为顶部距离，根据实际情况设置
  }
  setTableHeight()
  window.addEventListener('resize', setTableHeight);
});
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  padding: 20px;
}

.pagination_con {
  display: flex;
  justify-content: end;
  padding: 10px;
  background: #fff;
}

.btn_con {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
  